package com.example.androiddevchallenge.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.paddingFromBaseline
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.navigate
import com.example.androiddevchallenge.R
import com.example.androiddevchallenge.screens.login.LOGIN_SCREEN
import com.example.androiddevchallenge.ui.theme.BloomRoundedButtonTheme
import com.example.androiddevchallenge.ui.theme.MyTheme
import com.example.androiddevchallenge.ui.theme.pink900
import com.example.androiddevchallenge.ui.theme.white

const val WELCOME_SCREEN = "welcome_screen"

@Composable
fun WelcomeScreen(
    navController: NavHostController
) {
    WelcomeScreenBackground {
        Column(
            modifier = Modifier.padding(top = 72.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 80.dp, bottom = 48.dp),
                painter = painterResource(id = R.drawable.ic_welcome_illos),
                contentDescription = "Bloom Logo Icon",
                contentScale = ContentScale.Crop
            )

            Image(
                painter = painterResource(id = R.drawable.ic_logo),
                contentDescription = "Bloom Logo Text"
            )

            Text(
                modifier = Modifier.paddingFromBaseline(top = 32.dp, bottom = 40.dp),
                text = stringResource(id = R.string.bloom_login_subtitle),
                color = MaterialTheme.colors.onPrimary,
                textAlign = TextAlign.Center
            )

            BloomRoundedButtonTheme {
                Column(modifier = Modifier.padding(start = 16.dp, end = 16.dp)) {
                    Button(
                        onClick = { /* TODO 创建账号按钮点击事件 */ },
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(bottom = 8.dp)
                            .height(height = 48.dp)
                    ) {
                        Text(text = stringResource(id = R.string.create_account))
                    }

                    TextButton(
                        onClick = { navController.navigate(LOGIN_SCREEN) },
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        val contentColor = if (MaterialTheme.colors.isLight) pink900 else white
                        Text(text = stringResource(id = R.string.login), color = contentColor)
                    }
                }
            }
        }
    }
}

@Composable
fun WelcomeScreenBackground(
    content: @Composable () -> Unit
) {
    Surface(
        modifier = Modifier.fillMaxHeight(),
        color = MaterialTheme.colors.primary
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_welcome_bg),
            contentDescription = "Welcome background",
            contentScale = ContentScale.Crop
        )
        content()
    }
}